<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./style.css"></link>
</head>
<body>
  <div class="wrapper">
    <video class="video" width="765" height="430" controls src="https://media.w3.org/2010/05/sintel/trailer.mp4"></video>
    
    <div class="speed">
      <div class="speed-ber">1.00X</div>
    </div>
  </div>

  <script>
    const speed = document.querySelector('.speed')
    const speedber = document.querySelector('.speed-ber')

    speed.addEventListener('mousemove', (e) => {
      const y = e.pageY - speed.offsetTop + 1
      const percent = y / speed.offsetHeight 
      const height = Math.round(percent * 100) + '%'
      
      const min = 0.4
      const max = 4
      const playbackRate = percent * (max - min) + min

      speedber.style.height = height
      speedber.innerHTML = playbackRate.toFixed(2) + 'X'

      document.querySelector('.video').playbackRate = playbackRate
    })
  </script>
</body>
</html>